import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import { Divider, CircularProgress } from '@material-ui/core';
import { Topbar } from './components';
import { useSelector } from 'react-redux'

const useStyles = makeStyles(() => ({
  root: {
    position: 'relative'
  },
  content: {
    height: '100%',
  },
  progressContainer: {
    position: 'fixed',
    left: 0,
    top: 0,
    backgroundColor: 'rgba(52, 52, 52, 0.8)',
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
}));

const Minimal = ({ themeMode, children, className }) => {
  const classes = useStyles();
  const loading = useSelector((state) => state.loading.isLoading)

  return (
    <div className={clsx(classes.root, className)}>
      <Topbar themeMode={themeMode} />
      <Divider />
      <main className={classes.content}>{children}</main>
      { loading && (
        <div className={classes.progressContainer}>
          <CircularProgress color="secondary" />
        </div>
      )}      
    </div>
  );
};

Minimal.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  themeMode: PropTypes.string.isRequired,
};

export default Minimal;
